
function create(context, html) {
  return {
    template : html,
    data : function () {
      return {
        status : null,

        sliderRange : [ 1, 120 ],

        // 概率编辑部分
        edited : false,
        columns : [
          {
            dataIndex: 'name',
            key: 'name',
            slots: { title: 'customTitle' },
            scopedSlots: { customRender: 'name' },
          },
          {
            title: '权重',
            dataIndex: 'weight',
            key: 'weight',
            scopedSlots: { customRender: 'weight' },
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'action' },
          },
        ],
        
        data : []
      }
    },
    props : {
      sid : String,
    },
    methods : {

      // 3. 摇奖概率
      onRangeChange : function () {
        if (parseInt(this.sliderRange[0]) != this.sliderRange[0]) {
          let n0 = parseInt(this.sliderRange[0]);
          if (n0 < 0) {
            n0 = 0;
          } else if (n0 > 999) {
            n0 = 999;
          } else if (isNaN(n0)) {
            n0 = 1;
          }
          this.sliderRange[0] = n0;
        }
        if (parseInt(this.sliderRange[1]) != this.sliderRange[1]) {
          let n1 = parseInt(this.sliderRange[1]);
          if (n1 < 0) {
            n1 = 0;
          } else if (n1 > 999) {
            n1 = 999;
          } else if (isNaN(n1)) {
            n1 = 1;
          } else if (n1 < this.sliderRange[0]) {
            n1 = this.sliderRange[0];
          }
          this.sliderRange[1] = n1;
        }

        this.changeData(true, false);
      },

      btnValueReset : function () {
        this.edited = false;
        this.buildData();
      },
      btnValueSubmit : function () {
        let candidates = [];

        this.data.forEach((item) => {
          candidates.push({
            slot : item.key.split(','),
            weight : item.weight,
          })
        })

        context.sendCommand(this.sid, 'weightChange', {
          candidates
        });
        this.edited = false;
      },

      btnItemReset : function (item) {
        let key = item.key;
        
        const rawCandidates = this.status.data.candidates.filter((candidate) => {
          return key === candidate.slot.join(',');
        });
        if (rawCandidates.length === 1) {
          item.weight = rawCandidates[0].weight;
        } else {
          item.weight = 10;
        }
      },
      btnItemZero : function (item) {
        this.edited = true;
        item.weight = 0;
      },

      // 监听事件部分
      onScreenUpdated : function () {
        let status = this.status = context.getStatus(this.sid);
        if (status == null) {
          return;
        }
        if (!this.edited) {
          this.buildData();
        }
      },

      // 功能函数
      buildData : function () {
        if (this.status && this.status.data) {
          let data = [];
          this.status.data.candidates.forEach(candidate => {
            data.push({
              key : candidate.slot.join(','),
              name : candidate.slot.join(' '),
              weight: candidate.weight
            })
          });
          this.data = data;

          // 来确定一下 range 的实际范围
          this.sliderRange = this.status.data.candidates.reduce((prev, current) => {
            let figure = parseInt(current.slot.join(''));
            if (prev[0] == null) {
              return [figure, figure];
            }
            if (figure < prev[0]) {
              prev[0] = figure;
            } else if (figure > prev[1]) {
              prev[1] = figure;
            }
            return prev;
          }, [null, null])
        }
      },

      changeData : function (rangeUpdated, valueUpdated) {
        this.edited = true;

        if (rangeUpdated) {
          let data = [];
          const rawData = {};
          this.data.forEach((item) => {
            rawData[item.key] = item;
          });

          const rawCandidate = {};
          this.status.data.candidates.forEach((candidate) => {
            let key = candidate.slot.join(',');
            rawCandidate[key] = {
              key,
              name : candidate.slot.join(' '),
              weight: candidate.weight
            };
          });

          const rangeStart = this.sliderRange[0], rangeEnd = this.sliderRange[1];
          for (let i = rangeStart; i <= rangeEnd; i++) {
            let figureText = `${parseInt(i/100)},${parseInt(i/10)%10},${i%10}`;
            if (rawData[figureText]) {
              data.push(rawData[figureText]);
            } else if (rawCandidate[figureText])  {
              // 如果是 candidate 有的话, 直接从 candidate 中去取
              data.push(rawCandidate[figureText]);
            } else {
              // 新造
              data.push({
                key : figureText,
                name : `${parseInt(i/100)} ${parseInt(i/10)%10} ${i%10}`,
                weight: 10
              });
            }
          }
          this.data = data;
        }

        if (valueUpdated) {
          // TODO
        }
      }
    },
    mounted : function () {
      this.onScreenUpdated();
      
      context.getBus().$on('screen-status-sync-all', this.onScreenUpdated);
      context.getBus().$on('screen-updated', this.onScreenUpdated);
      context.getBus().$on('screen-destroyed', this.onScreenUpdated);
    },
    destroyed : function () {
      context.getBus().$off('screen-status-sync-all', this.onScreenUpdated);
      context.getBus().$off('screen-updated', this.onScreenUpdated);
      context.getBus().$off('screen-destroyed', this.onScreenUpdated);
    }
  }
}

export default create;
